:root {/* 默认主题 */
  /********************** 文本系统 **********************/
  --text-ffffff: #ffffff;    /* 白色文字 */
  --text-333333: #333333;    /* 主文字颜色 */
  --text-666666: #666666;    /* 次要文字 */
  --text-999999: #999999;    /* 禁用文字 */
  --text-0066cc: #0066cc;    /* 链接文字 */
  --text-ff0000: #ff0000;    /* 错误文字 */
  --text-28a745: #28a745;    /* 成功文字 */

  /********************** 背景颜色 **********************/
  --bg-ffffff: #ffffff;      /* 主背景 */
  --bg-fffdf8: #fffdf8;      /* 自定义背景 */
  --bg-f5f5f5: #f5f5f5;      /* 次要背景 */
  --bg-f0f8ff: #f0f8ff;      /* 强调背景 */
  --bg-0066cc: #0066cc;      /* 按钮背景 */
  --bg-ff0000: #ff0000;      /* 错误背景 */
  --bg-28a745: #28a745;      /* 成功背景 */

  /********************** 边框颜色 **********************/
  --border-e0e0e0: #e0e0e0;  /* 常规边框 */
  --border-cccccc: #cccccc;  /* 深色边框 */
  --border-0066cc: #0066cc;  /* 强调边框 */

  /********************** 特殊用途 **********************/
  --hover-f0f0f0: #f0f0f0;   /* 悬停背景 */
  --active-0066cc-20: rgba(0, 102, 204, 0.2); /* 激活状态 */
  --shadow-000000-10: rgba(0, 0, 0, 0.1);     /* 阴影颜色 */
  --shadow-000000-50: rgba(0, 0, 0, 0.5);
  --shadow-ffffff-50: rgba(255,255,255,0.5);
}

html[data-theme="deep-green"] {
  /********************** 文本系统 **********************/
  --text-ffffff: #ffffff;      /* 白色文字（保留，用于深绿背景上的文字） */
  --text-333333: #002200;      /* 主文字颜色（深墨绿，提高对比度） */
  --text-666666: #336633;      /* 次要文字（中墨绿） */
  --text-999999: #669966;      /* 禁用文字（灰墨绿） */
  --text-0066cc: #007722;      /* 链接文字（亮绿色） */
  --text-ff0000: #ff3333;      /* 错误文字（保留红色系） */
  --text-28a745: #00cc66;      /* 成功文字（更亮绿色） */

  /********************** 背景颜色 **********************/
  --bg-ffffff: #009944;        /* 主背景（深绿色） */
  --bg-fffdf8: #e6f5eb;        /* 浅绿色背景（原米白替换） */
  --bg-f5f5f5: #d0ebd8;        /* 淡绿色次要背景 */
  --bg-f0f8ff: #b8e0c4;        /* 中浅绿色强调背景 */
  --bg-0066cc: #007722;        /* 按钮背景（深绿） */
  --bg-ff0000: #ffe6e6;        /* 错误背景（浅红，保留） */
  --bg-28a745: #e6f5eb;        /* 成功背景（浅绿） */

  /********************** 边框颜色 **********************/
  --border-e0e0e0: #99cc99;    /* 常规边框（浅绿） */
  --border-cccccc: #66aa66;    /* 深色边框（中绿） */
  --border-0066cc: #007722;    /* 强调边框（深绿） */

  /********************** 特殊用途 **********************/
  --hover-f0f0f0: #a3d9a3;     /* 悬停背景（浅绿） */
  --active-0066cc-20: rgba(0, 119, 34, 0.2); /* 激活状态（深绿半透明） */
  --shadow-000000-10: rgba(0, 0, 0, 0.1);     
  --shadow-000000-50: rgba(0, 0, 0, 0.5);
  --shadow-ffffff-50: rgba(0, 153, 68, 0.3);  /* 绿色半透明阴影 */
}

html[data-theme="light-green"] {
  /********************** 文本系统 **********************/
  --text-ffffff: #ffffff;      /* 白色文字（保留） */
  --text-333333: #0a200a;      /* 主文字颜色（深墨绿） */
  --text-666666: #3a553a;      /* 次要文字（中墨绿） */
  --text-999999: #6a856a;      /* 禁用文字（灰墨绿） */
  --text-0066cc: #1e5631;      /* 链接文字（森林绿） */
  --text-ff0000: #e74c3c;      /* 错误文字（保留红色系） */
  --text-28a745: #27ae60;      /* 成功文字（亮绿色） */

  /********************** 背景颜色 **********************/
  --bg-ffffff: #e8f5e9;       /* 主背景（浅墨绿） */
  --bg-fffdf8: #f0f5e8;      /* 自定义背景 */
  --bg-f5f5f5: #d0e0d0;       /* 次要背景（淡墨绿） */
  --bg-f0f8ff: #b8d5b8;       /* 强调背景（中墨绿） */
  --bg-0066cc: #1e5631;       /* 按钮背景（森林绿） */
  --bg-ff0000: #ffebee;       /* 错误背景（浅红，保留） */
  --bg-28a745: #e8f5e9;       /* 成功背景（浅墨绿） */

  /********************** 边框颜色 **********************/
  --border-e0e0e0: #a8c0a8;   /* 常规边框（浅绿） */
  --border-cccccc: #789078;   /* 深色边框（中绿） */
  --border-0066cc: #1e5631;   /* 强调边框（森林绿） */

  /********************** 特殊用途 **********************/
  --hover-f0f0f0: #c0d8c0;    /* 悬停背景（浅墨绿） */
  --active-0066cc-20: rgba(30, 86, 49, 0.2); /* 激活状态 */
  --shadow-000000-10: rgba(0, 0, 0, 0.1);     
  --shadow-000000-50: rgba(0, 0, 0, 0.5);
  --shadow-ffffff-50: rgba(255,255,255,0.5);
}

html[data-theme="light-red"] {
  /********************** 文本系统 **********************/
  --text-ffffff: #ffffff;      /* 白色文字（保留） */
  --text-333333: #280a0a;      /* 主文字颜色（深褐红） */
  --text-666666: #553a3a;      /* 次要文字（中褐红） */
  --text-999999: #856a6a;      /* 禁用文字（灰褐红） */
  --text-0066cc: #802020;      /* 链接文字（深红） */
  --text-ff0000: #e74c3c;      /* 错误文字（亮红） */
  --text-28a745: #e74c3c;      /* 成功文字（改用红色系） */

  /********************** 背景颜色 **********************/
  --bg-ffffff: #fce8e8;       /* 主背景（浅褐红） */
  --bg-fffdf8: #f8f0e8;      /* 自定义背景 */
  --bg-f5f5f5: #f0d0d0;       /* 次要背景（淡褐红） */
  --bg-f0f8ff: #e8b8b8;       /* 强调背景（中褐红） */
  --bg-0066cc: #802020;       /* 按钮背景（深红） */
  --bg-ff0000: #ffebee;       /* 错误背景（浅红） */
  --bg-28a745: #fce8e8;       /* 成功背景（浅褐红） */

  /********************** 边框颜色 **********************/
  --border-e0e0e0: #d0a8a8;   /* 常规边框（浅红） */
  --border-cccccc: #b07878;   /* 深色边框（中红） */
  --border-0066cc: #802020;   /* 强调边框（深红） */

  /********************** 特殊用途 **********************/
  --hover-f0f0f0: #e0c0c0;    /* 悬停背景（浅褐红） */
  --active-0066cc-20: rgba(128, 32, 32, 0.2); /* 激活状态 */
  --shadow-000000-10: rgba(0, 0, 0, 0.1);     
  --shadow-000000-50: rgba(0, 0, 0, 0.5);
  --shadow-ffffff-50: rgba(255,255,255,0.5);
}

html[data-theme="dark"] {
  /********************** 文本系统 **********************/
  --text-ffffff: #ffffff;      /* 白色文字（主内容） */
  --text-333333: #e0e0e0;     /* 浅灰文字（替代默认深色） */
  --text-666666: #b0b0b0;     /* 中灰文字 */
  --text-999999: #808080;     /* 深灰文字（禁用状态） */
  --text-0066cc: #4d9eff;      /* 链接文字（亮蓝色，提高可读性） */
  --text-ff0000: #ff6b6b;     /* 错误文字（亮红色） */
  --text-28a745: #6bff6b;     /* 成功文字（亮绿色） */

  /********************** 背景颜色 **********************/
  --bg-ffffff: #121212;       /* 主背景（深黑） */
  --bg-fffdf8: #1a1a1a;      /* 深灰背景（与暗黑主题协调） */
  --bg-f5f5f5: #1e1e1e;       /* 次要背景（稍亮黑） */
  --bg-f0f8ff: #252525;       /* 强调背景（中灰黑） */
  --bg-0066cc: #4d9eff;       /* 按钮背景（亮蓝色） */
  --bg-ff0000: #ff3e3e;       /* 错误背景（亮红） */
  --bg-28a745: #2e7d32;       /* 成功背景（深绿） */

  /********************** 边框颜色 **********************/
  --border-e0e0e0: #333333;   /* 常规边框（深灰） */
  --border-cccccc: #555555;   /* 深色边框（中灰） */
  --border-0066cc: #4d9eff;   /* 强调边框（亮蓝色） */

  /********************** 特殊用途 **********************/
  --hover-f0f0f0: #2a2a2a;    /* 悬停背景（浅黑） */
  --active-0066cc-20: rgba(77, 158, 255, 0.2); /* 激活状态（半透明蓝） */
  --shadow-000000-10: rgba(0, 0, 0, 0.3);     /* 阴影（更深的黑） */
  --shadow-000000-50: rgba(0, 0, 0, 0.7);
  --shadow-ffffff-50: rgba(255, 255, 255, 0.1); /* 反色阴影（浅光晕） */
}

html[data-theme="deep-red"] {
  /********************** 文本系统 **********************/
  --text-ffffff: #ffffff;      /* 白色文字（用于深红背景上的文字） */
  --text-333333: #f8f8f8;      /* 主文字颜色（亮灰） */
  --text-666666: #e0e0e0;      /* 次要文字（中灰） */
  --text-999999: #aaaaaa;      /* 禁用文字（浅灰） */
  --text-0066cc: #a52a2a;      /* 链接文字（亮红） */
  --text-ff0000: #ff4d4d;      /* 错误文字（高亮红） */
  --text-28a745: #4CAF50;      /* 成功文字（保留绿色，避免冲突） */

  /********************** 背景颜色 **********************/
  --bg-ffffff: #8B0000;        /* 主背景（深红色） */
  --bg-fffdf8: #ffe8e8;        /* 浅红色背景（原米白替换） */
  --bg-f5f5f5: #f0d0d0;        /* 淡红色次要背景 */
  --bg-f0f8ff: #e8b8b8;        /* 中浅红色强调背景 */
  --bg-0066cc: #a52a2a;        /* 按钮背景（深红） */
  --bg-ff0000: #ffebee;        /* 错误背景（浅红，保留） */
  --bg-28a745: #e8f5e9;        /* 成功背景（浅绿，保留） */

  /********************** 边框颜色 **********************/
  --border-e0e0e0: #cc9999;    /* 常规边框（浅红） */
  --border-cccccc: #aa6666;    /* 深色边框（中红） */
  --border-0066cc: #a52a2a;    /* 强调边框（深红） */

  /********************** 特殊用途 **********************/
  --hover-f0f0f0: #d9a3a3;     /* 悬停背景（浅红） */
  --active-0066cc-20: rgba(165, 42, 42, 0.2); /* 激活状态（深红半透明） */
  --shadow-000000-10: rgba(0, 0, 0, 0.1);     
  --shadow-000000-50: rgba(0, 0, 0, 0.5);
  --shadow-ffffff-50: rgba(139, 0, 0, 0.3);    /* 深红半透明阴影 */
}

html, html *, html *::before, html *::after{
    transition: all 300ms ease;
    transition-delay: 0s;
}